<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.main {
				width: 1440px;
				height: 900px;
				background-image:url(img/11869944_1338790262403.jpg)
			}
			
			.pg {/*//处理字母及其图形*/
				position: absolute;
				width: 128px;
				height: 128px;
				background-image:url(img/22xiaodongwu_02.png);
				font-size: 35px;/*//字体大小*/
				font-family: "黑体";
				text-align: center;/*字母处在图形中央*/
				line-height: 150px;
			}
			
			
			.top {/*边框*/
				height: 700px;
				border: 1px solid #FFFFFF;/*边框颜色*/
				overflow: hidden;
				position: relative;
			}
			
			.text {/*后面字体*/
				font-size: 25px;
				font-weight: bold;
				color: white;
			}
			
			.kaishi {
				width: 50px;
				height: 50px;
				position: absolute;
				left: 160px;
				top: 67px;
				border-radius: 50%;
				cursor: pointer;
				color: white;
				font-size: 20px;
			}
			
			.zanting {
				width: 40px;
				height: 40px;
				position: absolute;
				left: 115px;
				top: 30px;
				border-radius: 50%;
				cursor: pointer;
				color: white;
				font-size: 20px;
			}
			
			.tuichu {
				width: 40px;
				height: 40px;
				position: absolute;
				left:115px;
				top: 100px;
			    border-radius: 50%;
				cursor: pointer;
				color: white;
				font-size: 20px;
			}
			.jieshu{	
				width: 40;
				height: 40px;
				position: absolute;
				left: 70px;
				top:67px;
				cursor: pointer;
				color: white;
				font-size: 20px;
				
			}
		</style>
	</head>

	<body>
		<div class="main">
			<div class="top">
				<!--<div id="pg01" class="pg" style="left: 100px;top: 0;">
					A
				</div>
				<div id="pg02" class="pg" style="left: 200px;top: 50px;">
					B
				</div>-->

			</div>
			<div class="bottom">
				<table style="position: relative;" border="0" width="100%" height="300">
					<tr><!--标签 定义一行单元格-->
						<td>
							<div class="kaishi" onclick="kaishi()"> 开始</div>
							<div class="zanting" onclick="zanting()"> 暂停</div>
							<div class="tuichu" onclick="tuichu()">退出</div>
							<div class="jieshu" onclick="jieshu()"> 结束</div>
						</td>
						<td width="750">
							<div class="text" id="zql">正确率:<span>100%</span></div>
							<div class="text"id ="time"> 时间:<span>00:00:00</span></div>
							<div class="text"id="sd">速度:<span>1个/分钟</span></div>
						</td>
						<td width="180">
							<img src="img/篮子.png" />
						</td>
					</tr>
				</table>
			</div>
		</div>
		<script type="text/javascript">
			//拿到要控制苹果元素
//			var pg1 = document.querySelector("#pg01");
//			var pg2 = document.querySelector("#pg02");
			var nz1 = 0;
			var createPG=0;
			var time=0;
			var timeid=0;
			var count=0;
			var sum=0;
			var sudu=0;
			function jieshu(){
				zanting()
				var divtop=document.querySelector(".top");
				divtop.innerHTML="";
				time=0;
				document.querySelector("#time").innerHTML="时间 00:00:00";	
					document.querySelector("#zql").innerHTML="正确率：100%";
					document.querySelector("#sd").innerHTML="速度：0个/分钟";
			}

			function zanting() {
				clearInterval(nz1);
				clearInterval(createPG);
				clearInterval(timeid);
				nz1 = 0;
			}

			function tuichu() {;
				
				window.close();
			}
             window.onkeydown = function(event){
             	if(nz1 !=0){
             		var divtop = document.querySelector(".top");
             		for(var i=0; i<divtop.children.length;i++){
             			var k =divtop.children[i].getAttribute("key");
             			if(k ==event.keyCode){
             				//删除当前XX
             				divtop.removeChild(divtop.children[i]);
             				sudu++;
             				break;
             			}
             		}
             	document.querySelector("#sd").innerHTML="速度："+parseInt(sudu/time*60)+"个/分钟";	
             	}
             }
			function kaishi() {
				if(nz1 == 0) {
					nz1 = setInterval(function() {
						var	 top=document.querySelector(".top");
						for(var i=0;i<top.children.length;i++){
							var pg=top.children[i];
							var t=parseInt(pg.style.top)+2;
							pg.style.top=t +"px";
							if(t>400)  {
							top.removeChild(top.children[i]);
							count++;
							
							}
							 document.querySelector("#zql").innerHTML="正确率"+":"+parseInt((1-count/sum)*100)+"%";
						}
					}, 33);
					createPG= setInterval (function(){
					var div=document.createElement("div");
					div.className="pg";
						div.style.left=parseInt(Math.random()*730)+"px";
						div.style.top="-102px";
						var ch=parseInt(Math.random()*26)+65;
						div.setAttribute("key",ch);
						
						div.innerHTML="&#" +ch+ ";";
						document.querySelector(".top").appendChild(div);
						sum++;
					},800)//产生一个苹果所需时间
					timeid= setInterval(function(){
						time++;
						var ss=time%60;
						ss=ss<10?"0"+ss:ss;
						var mm=parseInt(time/60)%60;
					    mm=mm<10?"0"+mm:mm;
						var hh=parseInt(time/3600);
					    hh=hh<10?"0"+hh:hh;
					    var divtime=document.querySelector("#time");
					divtime.innerHTML="时间:  "+hh+": "+mm+": "+ss;
					},1000);//时钟
				
				}
			}
		</script>
	</body>
</html>